<template>
  <div>
    <!-- v-model="list" 这个推荐方式不生效，不知道原因 -->
    <draggable
      :list="list"
      group="main"
      @start="drag = false"
      @end="drag = false"
      item-key="id"
      tag="section"
      :sort="true"
      :component-data="{ class: 'draggable-container' }"
      ghost-class="drag-ghost"
    >
      <template #item="{ element }">
        <div class="draggable-item">
          <el-icon>
            <component :is="element.icon" />
          </el-icon>
          {{ element.label }}
        </div>
      </template>
    </draggable>
  </div>
  <el-button style="margin-top: 15px" @click="addData">添加一个数据</el-button>
</template>
<script setup>
import { reactive, ref, shallowRef } from "vue";
import draggable from "vuedraggable";
import {
  House,
  Service,
  Setting,
  Clock,
  StarFilled,
} from "@element-plus/icons-vue";
let drag = ref(false);
let addCount = 0;
let list = reactive([
  {
    icon: shallowRef(House),
    id: 1,
    label: "首页",
  },
  {
    icon: shallowRef(Service),
    id: 2,
    label: "服务",
  },
  {
    icon: shallowRef(Setting),
    id: 3,
    label: "设置",
  },
  {
    icon: shallowRef(Clock),
    id: 4,
    label: "Clock",
  },
]);

function addData() {
  let id = ++addCount;
  list.push({
    icon: shallowRef(StarFilled),
    id: `new_${id}`,
    label: `新增${id}`,
  });
}
</script>
<style lang="less">
.draggable-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;

  .draggable-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 65px;
    height: 65px;
    &.drag-ghost {
      opacity: 0;
    }
    // &.sortable-drag {
    //   opacity: 1;
    // }
  }
}
</style>

